<script setup lang="ts">
  import { ref, toRefs, watch } from 'vue';
  import type { CommentRecord as _CommentRecord } from '/@/api/app/model/pinModel';
  import CommentAction from './CommentAction.vue';
  import { Avatar, Space } from '@arco-design/web-vue';
  import TalkContainer from '../../TalkContainer.vue';
  import IconLike from '/@/assets/pins/like.svg';
  import IconReply from '/@/assets/pins/comment.svg';
  import { isDef } from '/@/utils/is';
  // import { OnClickOutside } from '@vueuse/components';

  type CommentRecord = Partial<_CommentRecord>;
  const props = withDefaults(
    defineProps<{
      data: Partial<CommentRecord>;
      actionWrapClass?: any;
      isCommenting?: boolean;
      showToUser?: boolean;
    }>(),
    {
      isCommenting: undefined,
      showToUser: false,
    },
  );
  const emit = defineEmits<{
    (event: 'view-user', item: CommentRecord): void;
    (event: 'view-to-user', item: CommentRecord): void;
    (event: 'comment', item: CommentRecord, comment?: string, file?: string): void | Promise<void>;
    (event: 'star', item: CommentRecord, cancel: boolean): void;
    (event: 'update:is-commenting', isCommenting: boolean): void;
  }>();

  const { data: item } = toRefs(props);
  const isCommentingRef = ref(props.isCommenting);

  const switchCommentActionVisible = () => {
    changeActionVisible(!isCommentingRef.value);
  };

  const changeActionVisible = (visible: boolean) => {
    if (isDef(props.isCommenting)) {
      emit('update:is-commenting', visible);
    } else {
      isCommentingRef.value = visible;
    }
  };

  const onClickUser = (item: CommentRecord) => {
    emit('view-user', item);
  };

  const onClickToUser = (item: CommentRecord) => {
    emit('view-to-user', item);
  };

  const onComment = async (item: CommentRecord, comment?: string, file?: string) => {
    await emit('comment', item, comment, file);
    changeActionVisible(false);
  };

  const onStar = (item: CommentRecord) => {
    emit('star', item, item.stared || false);
  };

  watch(
    () => props.isCommenting,
    () => {
      isCommentingRef.value = props.isCommenting;
    },
  );
</script>

<template>
  <div class="flex py-[12px] border-b-[1px] border-[#e5e6eb] last:border-b-0">
    <div class="flex-none">
      <Avatar :imageUrl="item.user_name?.icon" />
    </div>
    <div class="ml-[16px] flex-1">
      <div>
        <Space class="flex text-[#86909c]" :size="12">
          <Space :size="16">
            <span
              class="text-black font-bold max-w-[90px] text-ellipsis overflow-hidden whitespace-nowrap cursor-pointer"
              @click="onClickUser(item)"
              >{{ item.user_name?.name }}</span
            >
            <template v-if="props.showToUser && item.to_user_id && item.to_user_name">
              <span>回复</span>
              <span
                class="text-black font-bold max-w-[90px] text-ellipsis overflow-hidden whitespace-nowrap cursor-pointer"
                @click="onClickToUser(item)"
                >{{ item.to_user_name.name }}</span
              >
            </template>
          </Space>
          <div
            v-if="item.to_user_name?.introduce"
            class="max-w-[86px] text-ellipsis overflow-hidden whitespace-nowrap"
            >{{ item.to_user_name.introduce }}</div
          >
          <div>{{ $timeAgo(item.createTime) }}</div>
          <template #split>
            <span class="text-[#e5e6eb]">|</span>
          </template>
        </Space>
        <div class="mt-[8px]">
          <TalkContainer>{{ item.content }}</TalkContainer>
        </div>
        <div
          v-if="item.to_comment_content"
          class="bg-gray-200 px-[12px] mt-[8px] border-[1px] border-gray-300 rounded-[4px] h-[34px] flex items-center"
          >{{ `"${item.to_comment_content}"` }}</div
        >
        <div class="flex mt-[8px] space-x-[16px]">
          <div
            class="text-[#86909c] hover:text-[#1e80ff] cursor-pointer flex items-center"
            :class="{ '!text-[#1e80ff]': item.stared }"
            @click="onStar(item)"
            ><img class="w-[16px] h-[16px] mr-[4px]" :src="IconLike" />{{
              item.star ? item.star : '点赞'
            }}</div
          >
          <div class="text-[#86909c] hover:text-[#1e80ff] cursor-pointer"
            ><div
              class="flex items-center"
              @click="switchCommentActionVisible"
              :class="{ 'pointer-events-none': isCommentingRef }"
              ><img class="w-[16px] h-[16px] mr-[4px]" :src="IconReply" />{{
                isCommentingRef ? '取消回复' : '回复'
              }}</div
            ></div
          >
        </div>
      </div>
      <div
        v-if="isCommentingRef"
        class="w-full mt-[16px] mb-[8px] p-[12px] bg-gray-100 rounded-[2px]"
        :class="props.actionWrapClass"
      >
        <CommentAction
          :defaultActionVisible="true"
          :placeholder="`回复${item.user_name?.name}...`"
          @comment="
            (...args) => {
              onComment(item, ...args);
            }
          "
          @change-action-visible="changeActionVisible"
        />
      </div>
      <slot name="sub-list"></slot>
    </div>
  </div>
</template>
